<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>AI Chat</title>
    <link th:href="@{/css/bootstrap/bootstrap.min.css}" rel="stylesheet">
    <style>
        .app-container {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 250px;
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
            padding: 20px 0;
        }
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar-menu li {
            padding: 10px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .sidebar-menu li:hover {
            background-color: #e9ecef;
        }
        .sidebar-menu li.active {
            background-color: #007bff;
            color: white;
        }
        .sidebar-menu li i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px;
        }
        .message-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            resize: vertical; /* 只允许垂直调整大小 */
        }
        .send-btn {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f8f9fa;
            margin-bottom: 15px;
            resize: none; /* 禁止调整大小 */
        }
        .message {
            margin-bottom: 15px;
            display: flex;
        }
        .user-message {
            justify-content: flex-end;
        }
        .ai-message {
            justify-content: flex-start;
        }
        .message-content {
            max-width: 80%;
            padding: 10px 15px;
            border-radius: 15px;
            position: relative;
            resize: none; /* 禁止调整大小 */
        }
        .user-message .message-content {
            background-color: #007bff;
            color: white;
            border-bottom-right-radius: 0;
        }
        .ai-message .message-content {
            background-color: #e9ecef;
            border-bottom-left-radius: 0;
        }
        .thinking-box {
            border: 2px solid #ffc107;
            padding: 15px;
            border-radius: 5px;
            background-color: #fff3cd;
            margin: 15px 0;
            display: none;
            resize: none; /* 禁止调整大小 */
            overflow: hidden; /* 隐藏溢出内容 */
        }
        .thinking-content {
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #ffc107;
            border-radius: 5px;
            background-color: #ffffff;
            white-space: pre-wrap;
            resize: none; /* 禁止调整大小 */
            width: 100%; /* 固定宽度 */
            height: 200px; /* 固定高度 */
            min-width: 100%; /* 最小宽度 */
            max-width: 100%; /* 最大宽度 */
            min-height: 200px; /* 最小高度 */
            max-height: 200px; /* 最大高度 */
            box-sizing: border-box; /* 包含边框和内边距 */
        }
        .streaming-content {
            white-space: pre-wrap;
            resize: none; /* 禁止调整大小 */
        }
        .final-response {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #ccc;
            resize: none; /* 禁止调整大小 */
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 左侧菜单栏 -->
        <div class="sidebar">
            <ul class="sidebar-menu">
                <li class="active" data-target="chat">
                    <i>💬</i> 聊天
                </li>
                <li data-target="settings">
                    <i>⚙️</i> 设置
                </li>
                <li data-target="history">
                    <i>📚</i> 历史记录
                </li>
                <li data-target="help">
                    <i>❓</i> 帮助
                </li>
            </ul>
        </div>
        
        <!-- 主内容区域 -->
        <div class="main-content">
            <div class="chat-container">
                <h1>AI Chat</h1>
                <div id="chatMessages" class="chat-messages"></div>
                <input type="text" id="messageInput" class="message-input" placeholder="请输入您的问题...">
                <button id="sendBtn" class="send-btn">发送</button>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script>
        $(document).ready(function() {
            // 定义思考过程的开始和结束标记
            const START_FLAG = '<think>';
            const END_FLAG = '</think>';
            
            // 菜单点击事件
            $('.sidebar-menu li').click(function() {
                // 移除所有活动状态
                $('.sidebar-menu li').removeClass('active');
                // 为当前点击的菜单项添加活动状态
                $(this).addClass('active');
                
                // 获取目标内容
                const target = $(this).data('target');
                
                // 根据目标显示相应内容
                switch(target) {
                    case 'chat':
                        // 聊天页面已经在显示，无需额外操作
                        break;
                    case 'settings':
                        // 这里可以添加设置页面的逻辑
                        alert('设置页面功能待实现');
                        break;
                    case 'history':
                        // 这里可以添加历史记录页面的逻辑
                        alert('历史记录页面功能待实现');
                        break;
                    case 'help':
                        // 这里可以添加帮助页面的逻辑
                        alert('帮助页面功能待实现');
                        break;
                }
            });
            
            $('#sendBtn').click(function() {
                const message = $('#messageInput').val();
                if (!message.trim()) return;
                
                // 添加用户消息到聊天记录
                addMessageToChat(message, 'user');
                
                // 清空输入框
                $('#messageInput').val('');
                
                // 创建AI回复消息容器
                const aiMessageId = 'ai-' + Date.now();
                addAIMessageContainer(aiMessageId);
                
                // 创建EventSource连接
                const eventSource = new EventSource('/ai/chat?message=' + encodeURIComponent(message));
                
                let fullResponse = '';
                let inThinkingMode = false;
                let thinkingContent = '';
                let finalResponse = '';
                const aiMessageContainer = $('#' + aiMessageId);
                
                eventSource.addEventListener('message', function(event) {
                    const text = event.data;
                    fullResponse += text;
                    
                    // 检查是否进入思考模式
                    if (text.includes(START_FLAG)) {
                        inThinkingMode = true;
                        thinkingContent = '';
                        
                        // 显示思考框
                        let thinkingBox = aiMessageContainer.find('.thinking-box');
                        if (thinkingBox.length === 0) {
                            thinkingBox = $('<div class="thinking-box"><strong>思考过程：</strong><div class="thinking-content"></div></div>');
                            aiMessageContainer.append(thinkingBox);
                        }
                        thinkingBox.show();
                    }
                    
                    if (inThinkingMode) {
                        // 如果在思考模式中，收集思考内容
                        thinkingContent += text;
                        
                        // 更新思考内容显示
                        const thinkingContentDiv = aiMessageContainer.find('.thinking-content');
                        if (thinkingContentDiv.length > 0) {
                            thinkingContentDiv.text(thinkingContent);
                            // 滚动到内容底部
                            thinkingContentDiv.scrollTop(thinkingContentDiv[0].scrollHeight);
                        }
                    } else {
                        // 如果不在思考模式中，直接显示内容
                        let streamingContent = aiMessageContainer.find('.streaming-content');
                        if (streamingContent.length === 0) {
                            streamingContent = $('<div class="streaming-content"></div>');
                            aiMessageContainer.append(streamingContent);
                        }
                        streamingContent.text(streamingContent.text() + text);
                    }
                    
                    // 检查是否结束思考模式
                    if (text.includes(END_FLAG)) {
                        inThinkingMode = false;
                        
                        // 提取思考内容（从开始标记到结束标记之间）
                        const startIndex = fullResponse.indexOf(START_FLAG);
                        const endIndex = fullResponse.indexOf(END_FLAG) + END_FLAG.length;
                        
                        if (startIndex !== -1 && endIndex > startIndex) {
                            thinkingContent = fullResponse.substring(startIndex, endIndex);
                            finalResponse = fullResponse.substring(endIndex);
                            
                            // 更新思考内容显示
                            const thinkingContentDiv = aiMessageContainer.find('.thinking-content');
                            if (thinkingContentDiv.length > 0) {
                                // 只显示开始标记到结束标记之间的内容
                                const cleanThinkingContent = thinkingContent.replace(START_FLAG, '').replace(END_FLAG, '');
                                thinkingContentDiv.text(cleanThinkingContent);
                            }
                            
                            // 显示结束标记之后的内容
                            if (finalResponse) {
                                let finalResponseDiv = aiMessageContainer.find('.final-response');
                                if (finalResponseDiv.length === 0) {
                                    finalResponseDiv = $('<div class="final-response"></div>');
                                    aiMessageContainer.append(finalResponseDiv);
                                }
                                finalResponseDiv.text(finalResponse);
                            }
                        }
                    }
                    
                    // 滚动到底部
                    $('#chatMessages').scrollTop($('#chatMessages')[0].scrollHeight);
                });
                
                eventSource.addEventListener('end', function(event) {
                    eventSource.close();
                });
                
                eventSource.onerror = function(err) {
                    console.error('EventSource failed:', err);
                    eventSource.close();
                };
            });
            
            // 添加消息到聊天记录
            function addMessageToChat(message, sender) {
                const chatMessages = $('#chatMessages');
                const messageDiv = $(`<div class="message ${sender}-message"></div>`);
                
                const contentDiv = $(`<div class="message-content">${message}</div>`);
                
                messageDiv.append(contentDiv);
                chatMessages.append(messageDiv);
                
                // 滚动到底部
                chatMessages.scrollTop(chatMessages[0].scrollHeight);
            }
            
            // 添加AI消息容器
            function addAIMessageContainer(id) {
                const chatMessages = $('#chatMessages');
                const messageDiv = $(`<div class="message ai-message"></div>`);
                
                const contentDiv = $(`<div class="message-content" id="${id}"></div>`);
                
                messageDiv.append(contentDiv);
                chatMessages.append(messageDiv);
                
                // 滚动到底部
                chatMessages.scrollTop(chatMessages[0].scrollHeight);
            }
        });
    </script>
</body>
</html>